<template>
  <input v-model="iptContent" :style="{ width: `${cmptWidth}px` }" />
</template>

<script>
export default {
  name: "BlankInput",
  data() {
    return {
      iptContent: "",
    };
  },
  computed: {
    cmptWidth() {
      const fontSize = 16;
      const defaultWidth = 140;
      const maxCharNum = defaultWidth / fontSize;
      if (this.iptContent.length <= maxCharNum) {
        return defaultWidth;
      } else {
        return this.iptContent.length * fontSize;
      }
    },
  },
};
</script>

<style lang='less' scoped>

</style>